<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <!-- 自定义组件 -->
      <component-one>
        <component-two></component-two>
      </component-one>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
        $scope.childName = "我是传到组件中的信息";
      });
      app.component("componentOne",{
        controller:function(){
          this.name = "component-one"
          this.sayHello = function(){
            console.log("Hello");
          }
        }
      })
      app.component("componentTwo",{
        template:`
            <div>
                <h3>自定义组件</h3>
            </div>
        `,
        require:{
          one:"?^componentOne"
        },
        controller:function(){
          this.$onInit = function(){
            console.log(this.one.name);
            this.one.sayHello();
          }
        }
      });

    </script>
  </body>
</html>
